<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElCard,
  ElImage,
  ElInput,
  ElLink,
  ElMessage,
  ElScrollbar,
  ElSkeleton,
  ElSkeletonItem,
  ElSpace,
  ElTag,
} from 'element-plus';

import { searchDramaListApi } from '#/api';
import anorak from '#/assets/image/anorak.jpg';

const queryStr = ref('');

const dramaList = ref();
const loading = ref(true);

const searchTv = async () => {
  dramaList.value = await searchDramaListApi({ dramaName: queryStr.value });
  if (dramaList.value.length === 0) {
    ElMessage({
      message: $t('page.subscribe.searchEmpty'),
      type: 'warning',
    });
  } else {
    ElMessage({
      message: $t('page.subscribe.searchSuccess'),
      type: 'success',
    });
  }
  // console.log(dramaList.value);
  loading.value = false;
};

const router = useRouter();
const dramaDetail = (item: number) => {
  router.push({ path: `/sub/drama/${item}` });
};
</script>

<template>
  <Page
    :description="$t('subscribe.drama.description')"
    :title="$t('subscribe.drama.title')"
  >
    <ElCard>
      <div style="display: flex; align-items: center">
        <div style="flex-grow: 7; margin-right: 4%; margin-left: 4%">
          <ElInput
            v-model="queryStr"
            :placeholder="$t('subscribe.drama.searchTips')"
            clearable
            size="large"
          />
        </div>
        <div style="flex-grow: 3">
          <ElButton plain size="large" type="primary" @click="searchTv()">
            {{ $t('subscribe.drama.search') }}
          </ElButton>
        </div>
      </div>

      <ElSpace
        v-for="(item, index) in dramaList"
        :key="index"
        :fill-ratio="18"
        wrap
      >
        <ElCard style="margin: 20px">
          <template #header>
            <ElScrollbar
              :min-size="0"
              class="demoElScrollbar"
              style="width: 12rem"
            >
              <div style="display: flex">
                <ElLink
                  :href="item.source"
                  :underline="false"
                  class="scrollbar-demo-item"
                  target="_blank"
                  @click.stop
                >
                  {{ item.title }}
                </ElLink>
              </div>
            </ElScrollbar>
          </template>
          <div @click="dramaDetail(item.original)">
            <div style="position: relative">
              <ElSkeleton
                :loading="loading"
                :throttle="500"
                style="width: 188px; height: 282px"
              >
                <template #template>
                  <ElSkeletonItem
                    style="width: 188px; height: 282px; border-radius: 4%"
                    variant="image"
                  />
                </template>
                <template #default>
                  <ElImage
                    :src="item.image"
                    style="width: 188px; height: 282px; border-radius: 4%"
                  >
                    <template #error>
                      <ElImage
                        :src="anorak"
                        class="image"
                        style="width: 188px; height: 282px; border-radius: 4%"
                      />
                    </template>
                  </ElImage>
                </template>
              </ElSkeleton>

              <ElTag
                v-if="item.count !== 0 && item.count !== null"
                effect="dark"
                round
                style="position: absolute; top: 1%; left: 1%"
                type="warning"
              >
                {{ item.count }}
              </ElTag>

              <ElTag
                v-if="item.time !== '' && item.time !== null"
                effect="dark"
                round
                style="position: absolute; right: 3%; bottom: 2%"
                type="primary"
              >
                {{ item.time }}
              </ElTag>
            </div>
          </div>
        </ElCard>
      </ElSpace>
    </ElCard>
  </Page>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: max-content;
  text-align: center;
  border-radius: 4px;
}
</style>
